<template>
	<view class="container">
		<view class="top">
			<view class="top-left">
				<view class="top-left-title font-AlimamaDongFangDaKaiRegular">
					灵脉
				</view>
				<view class="top-left-experience font-AlibabaPuHuiTiBlack">
					LV.{{props.info.level}}
					<view class="experience-tiao">
						<view class="experience-tiao-inner">	
						</view>
					</view>
				</view>
				<view class="top-left-talent font-PingFangRegular">
					可用天赋：{{props.info.usableTalentsCount}}
					<image class="talent-img" :src="sheep.$url.static('/assets/img/modal-lingmai-fanhui.png')" mode="aspectFill"></image>
				</view>
			</view>
			<image class="top-right" :src="sheep.$url.static('/assets/img/modal-lingmai-zhuque.png')" mode="aspectFill"></image>
		</view>
		<view class="center">
			<view class="center-left font-AlimamaDongFangDaKaiRegular">
				LV.6
				<view class="center-left-inner font-PingFangRegular">
					<view class="inner-info">
						<image class="lingshi" :src="sheep.$url.static('/assets/img/user-lingshi@2x.png')" mode="aspectFill"></image>
						+0.0552
					</view>
					每日可收集到灵石
				</view>
			</view>
			<image class="center-jiantou" :src="sheep.$url.static('/assets/img/modal-lingmai-jiantou.png')" mode="aspectFill"></image>
			<view class="center-right font-AlimamaDongFangDaKaiRegular">
				LV.7
				<view class="center-right-inner font-PingFangRegular">
					<view class="inner-info">
						<image class="lingshi" :src="sheep.$url.static('/assets/img/user-lingshi@2x.png')" mode="aspectFill"></image>
						+0.0667
					</view>
					每日可收集到灵石
				</view>
			</view>
		</view>
		<view class="bottom">
			<text class="bottom-text font-PingFangMedium">
				灵脉是朱雀寻宝的神器，随着灵脉等级的不断提升，朱雀
				将有机会发现规模更加庞大的灵石堆
			</text>
			<view class="bottom-close font-PingFangMedium">
				<view class="bottom-check">
				</view>
				关闭升级提醒
			</view>
			<view class="bottom-pay font-AlimamaDongFangDaKaiRegular">
				需要支付
				<image class="lingshi" :src="sheep.$url.static('/assets/img/user-lingshi@2x.png')" mode="aspectFill"></image>
				5.04
			</view>
		</view>
	</view>
</template>

<script setup>
	import sheep from '@/sheep';
	import { computed, reactive, ref } from 'vue';
	const props = defineProps({
		info: {
			type: Object,
			default: {
				level: 6,
				usableTalentsCount: 0,
				
			}
		}
	})
</script>

<style lang="scss" scoped>
	.container{
		display: flex;
		flex-direction: column;
		align-items: center;
		.top{
			width: 750rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			.top-left{
				margin-left: 50rpx;
				.top-left-title{
					color: #017482;
					font-size: 48rpx;
					font-style: normal;
					font-weight: 400;
				}
				.top-left-experience{
					margin-top: 24rpx;
					height: 34rpx;
					flex-shrink: 0;
					color: #017482;
					font-size: 24rpx;
					font-style: normal;
					font-weight: 1000;
					display: flex;
					flex-direction: row;
					align-items: center;
					.experience-tiao{
						margin-left: 12rpx;
						width: 288rpx;
						height: 20rpx;
						flex-shrink: 0;
						border-radius: 32rpx;
						background: #1697A6;
						.experience-tiao-inner{
							width: 140rpx;
							height: 20rpx;
							flex-shrink: 0;
							border-radius: 32rpx;
							background: #017482;
						}
					}
				}
				.top-left-talent{
					margin-top: 18rpx;
					width: 220rpx;
					height: 50rpx;
					flex-shrink: 0;
					border-radius: 8rpx;
					background: #BECCC74D;
					color: #017482;
					font-size: 24rpx;
					font-style: normal;
					font-weight: 600;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					padding: 0 6rpx;
					.talent-img{
						width: 42rpx;
						height: 42rpx;
					}
				}
			}
			.top-right{
				margin-right: 40rpx;
				width: 290rpx;
				height: 240rpx;
			}
		} 
		.center{
			margin-top: 40rpx;
			width: 686rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			.center-left, .center-right{
				width: 300rpx;
				height: 242rpx;
				flex-shrink: 0;
				box-sizing: border-box;
				border-radius: 18rpx;
				border: 4rpx solid #1498A89A;
				background: #1498A89A;
				color: #FFF;
				text-align: center;
				font-size: 24rpx;
				font-style: normal;
				font-weight: 400;
				padding-top: 16rpx;
				overflow: hidden;
			}
			.center-right{
				border: 4rpx solid #0E93A3;
				background: #1697A6;
			}
			.center-jiantou{
				width: 50rpx;
				height: 50rpx;
			}
			.center-left-inner, .center-right-inner{
				margin-top: 14rpx;
				background-color: #FCFFFA;
				width: 300rpx;
				height: 240rpx;
				overflow: hidden;
				color: #999;
				text-align: center;
				font-size: 24rpx;
				font-style: normal;
				font-weight: 600;
				.lingshi{
					margin-right: 6rpx;
					width: 40rpx;
					height: 40rpx;
				}
				.inner-info{
					margin-top: 42rpx;
					margin-bottom: 12rpx;
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					color: #232323;
					font-size: 32rpx;
					font-style: normal;
					font-weight: 700;
				}
			}
		}
		.bottom{
			margin-top: 48rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			.bottom-text{
				width: 600rpx;
				height: 68rpx;
				display: inline-block;
				white-space: pre-line;
				color: #1697A6;
				text-align: center;
				font-size: 24rpx;
				font-style: normal;
				font-weight: 400;
				line-height: 34rpx; 
			}
			.bottom-close{
				margin-top: 50rpx;
				height: 40rpx;
				color: #1697A6;
				text-align: center;
				font-size: 12px;
				font-style: normal;
				font-weight: 400;
				line-height: 40rpx; 
				.bottom-check{
					margin-right: 6rpx;
					float:left;
					width: 40rpx;
					height: 40rpx;
					flex-shrink: 0;
					border-radius: 4rpx;
					background: #01748266;
				}
			}
			.bottom-pay{
				margin-top: 24rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				width: 686rpx;
				height: 100rpx;
				flex-shrink: 0;
				border-radius: 18rpx;
				background: #FFF;
				color: #017482;
				font-size: 32rpx;
				font-style: normal;
				font-weight: 400;
				.lingshi{
					width: 52rpx;
					height: 52rpx;
					margin: 0 12rpx;
				}
			}
		}
	}
	
</style>
